<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">
				首页
			</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/goods' }">商品列表</el-breadcrumb-item>
			<el-breadcrumb-item>商品编辑</el-breadcrumb-item>
		</el-breadcrumb>


		<el-form :model="Goodslist" ref="form" label-width="100px"
			style="margin-top: 20px;width: 50%;margin-left: 20%;">
			<el-form-item label="商品编号" prop="goods_id">
				<el-input v-model="Goodslist.goods_id" disabled></el-input>
			</el-form-item>
			<el-form-item label="商品名称" prop="goods_name">
				<el-input v-model="Goodslist.goods_name"></el-input>
			</el-form-item>
			<el-form-item label="商品图片">
				<el-upload class="avatar-uploader" action="http://localhost:8080/goods/uploadImage"
					:show-file-list="false" :before-upload="beforeUpload" :on-success="uploadSuccess">
					<img v-if="imageUrl1" :src="imageUrl1" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>

			</el-form-item>
			<el-form-item label="商品数量" prop="goods_number" :rules="[
      { required: true, message: '数量不能为空'},
      { type: 'number', message: '数量必须为数字值哦', trigger: [ 'blur','change']}
    ]">
				<el-input v-model.number="Goodslist.goods_number"></el-input>
			</el-form-item>
			<el-form-item label="商品价格" prop="goods_price" :rules="[
			  { required: true, message: '价格不能为空'},

			]">
				<el-input v-model.number="Goodslist.goods_price"></el-input>
			</el-form-item>
			<el-form-item label="商品描述" prop="goods_intro">
				<el-input v-model="Goodslist.goods_intro"></el-input>
			</el-form-item>

			<el-form-item label="商品分类" prop="category_name">
				<el-select v-model="Goodslist.category_name" placeholder="请选择">
					<el-option v-for="item in Categorylist" :key="item.category_id" :label="item.category_name"
						:value="item.category_name">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="商品状态" prop="goods_status">
				<el-select v-model="Goodslist.goods_status" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item style="float: right;">
				<el-button type="primary" @click="onSubmit">立即修改</el-button>
				<el-button @click="getGoodslist()">重置</el-button>

			</el-form-item>

		</el-form>


	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'Add',
		data() {
			return {
				imageUrl1: '',
				imageUrl2: '',
				options: [{
					value: '出售',
					label: '出售'
				}, {
					value: '待售',
					label: '待售'
				}, ],
				id: 0,
				Categorylist: [],
				Goodslist: {},
				form: {},
			}
		},

		created() {
			this.getGoodslist()
			this.getCategorylist()
		},

		methods: {

			beforeUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!(isJPG || isPNG)) {
					this.$message.error('上传头像图片只能是JPG或是PNG格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return (isJPG || isPNG) && isLt2M;
			},
			//这个上传成功的钩子函数会把后端的数据返回回来
			uploadSuccess(res, file) {
				this.imageUrl1 = URL.createObjectURL(file.raw); //缓存中的图片路径，用来显示
				this.imageUrl2 = res.url; //真实的图片路径，

				console.log(this.imageUrl1 + this.imageUrl2);
			},
			onSubmit() {
				console.log(this.Goodslist.category_name)
				axios.get('http://localhost:8080/category/getCategoryIdByName?category_name=' + this.Goodslist
						.category_name)
					.then((res) => {
						if (this.imageUrl2 == "") {
							this.imageUrl2 = "D:/AShopMimg/xwk/default.jpg"
						} else {
							
						}
						console.log(res.data)
						this.form.category_id = res.data.id.category_id;

						this.form.goods_id = this.Goodslist.goods_id;
						this.form.goods_name = this.Goodslist.goods_name;
						this.form.goods_img = this.imageUrl2;
						this.form.goods_status = this.Goodslist.goods_status;
						this.form.goods_intro = this.Goodslist.goods_intro;
						this.form.goods_price = this.Goodslist.goods_price;
						this.form.goods_number = this.Goodslist.goods_number;
						axios.post('http://localhost:8080/goods/update', this.form)
							.then((res) => {
								if (res.data.success) {
									this.$message({
										type: "success",
										message: "修改成功"
									});
									this.$router.push('/goods')

								} else {
									this.$message({
										type: "error",
										message: "修改失败"
									});
								}
							})

					})

			},
			getGoodslist() {
				this.id = this.$route.query.goods_id;
				axios.get('http://localhost:8080/goods/findbyId?goods_id=' + this.id)
					.then((res) => {

						this.Goodslist = res.data[0]
						this.imageUrl1 = 'data:image/jpeg;base64,' + this.Goodslist.goods_img;
						console.log(this.Goodslist)
					})
			},
			getCategorylist() {
				axios.get('http://localhost:8080/category/findAllCategory')
					.then((res) => {
						this.Categorylist = res.data.all
					})

			}
		},

	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed black;
		border-radius: 10px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		height: 100px;
		width: 100px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: blue;
	}

	.avatar {
		height: 150px;
		width: 150px;
	}

	.avatar-uploader-icon {

		font-size: 35px;
		line-height: 150px;
	}
</style>
